<template>
    <div class="content">
        <u-sticky bgColor="#fff">
            <tab-list :list="albumList" :activeIndex="activeIndex" @change="onTabChange" />
        </u-sticky>
        <div class="album-list" v-if="urls.length > 0">
            <div
                class="album-item"
                v-for="(item, index) in urls"
                :key="index"
                @click="showPreview(index)"
            >
                <u--image
                    :src="item"
                    mode="aspectFill"
                    :lazy-load="true"
                    width="330rpx"
                    height="248rpx"
                ></u--image>
            </div>
        </div>
        <div class="empty" v-if="urls.length === 0 && finish">
            <img class="image" src="@/static/images/common/empty.png" />
            <p class="name">暂无商家图片</p>
        </div>
    </div>
</template>

<script>
import TabList from '@/components/TabList';
export default {
    name: 'album',
    components: {
        TabList,
    },
    data() {
        return {
            activeIndex: 0,
            urls: [],
            albumList: [
                {
                    name: '室内环境',
                    urls: [],
                },
                {
                    name: '室外环境',
                    urls: [],
                },
                {
                    name: '茶水间',
                    urls: [],
                },
            ],
            finish: false,
        };
    },
    onLoad(options) {
        this.getPictureList(options.id);
    },
    methods: {
        onTabChange(index) {
            this.urls = [];
            this.activeIndex = index;
            this.urls = this.albumList[this.activeIndex].urls;
        },
        getPictureList(id) {
            this.$Api.study.picture
                .list({
                    studyhallId: Number(id),
                })
                .then(res => {
                    this.finish = true;
                    this.albumList[0].urls = res.indoorPictures || [];
                    this.albumList[1].urls = res.outdoorPictures || [];
                    this.albumList[2].urls = res.pantryPictures || [];
                    if (this.albumList[0].urls.length > 0) {
                        this.urls = this.albumList[0].urls;
                    }
                });
        },
        showPreview(index) {
            uni.previewImage({
                current: index,
                urls: this.urls,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
page {
    background: #fff;
}
.content {
    .tab-list {
        border-bottom: 1rpx solid #f1f1f1;
    }
    .album-list {
        padding: 40rpx 30rpx;
        @include flexBox(flex-start, flex-start, row, wrap);
        .album-item {
            width: 330rpx;
            height: 248rpx;
            border-radius: 12rpx;
            margin-right: 26rpx;
            margin-bottom: 20rpx;
            overflow: hidden;
            &:nth-child(2n) {
                margin-right: 0;
            }
        }
    }
}
</style>
